<template>
	<scroll ref="mescrollRef" @init="mescrollInit" :down="downOption"  @down="downCallback" :up="upOption" @up="upCallback" @emptyclick="emptyClick">
		<stop isBack>
			<view slot="content">报修列表</view>
		</stop>
		
		<view class="tac lh2 fs14 pos-r bcf padb3" v-if="static != null" @tap="showDetail = !showDetail">
			<!-- 报修的数据统计 -->
			<view class="flrc bg-gradual-green pad1">
				<view class="flex1 fs10">统计数据</view>
				<view class="flex1">{{static.date.day}} / 日</view>
				<view class="flex1">{{static.date.week}} / 月</view>
				<view class="flex1">{{static.date.month}} / 年</view>
				<view class="fa fa-angle-up padr2" v-show="showDetail"></view>
				<view class="fa fa-angle-down padr2" v-show="!showDetail"></view>
			</view>
			<view class="flrc bdtdo pad1"
			:style="{color:item.status.color,background:item.status.background}" 
			v-for="item in static.status" v-show="showDetail"
			>
				<view class="flex1 fs10 ">{{item.status.name}}</view>
				<view class="flex1"><text class="fs16 padr2">{{item.date.day}}</text> / 日</view>
				<view class="flex1"><text class="fs16 padr2">{{item.date.week}}</text> / 月</view>
				<view class="flex1"><text class="fs16 padr2">{{item.date.month}}</text> / 年</view>
				<view class="fa fa-angle-down padr2" style="visibility: hidden;"></view>
			</view>
			<ripple></ripple>
		</view>
		<view class="bcf padlr3 padtb2 bdtso">
			<search class="fs8 tac" placeholder="故障 \ 单号 \ 设备名称 \ 编码 \ 型号"  v-model="search" @search="doSearch()"></search>
		</view>
		<view class="flrc bcf pad3 bdtso bdbso fs8">
			<view class="flex1"><scondition @input="reload()" model="MachineBreakStatus" v-model="where.eq.status" label="订单状态"></scondition></view>
			<view class="flex1"><scondition @input="reload()" model="MachineBreakEmergency" v-model="where.eq.emergency" label="紧急程度"></scondition></view>
			<view class="flex1"><scondition @input="reload()" model="MachineBreakLevel" v-model="where.eq.level" label="故障等级"></scondition></view>
			<view class="flex1">
				<scondition @input="reload()" model="Department" 
				v-model="where.eq['machine.department']" label="报修部门" isTree></scondition>
			</view>
			<view class="pos-r">
				
				<view class="text-cyan pos-r pad2" @click="mySlide('orderby')">
					<view class="fa fa-sort-amount-asc"></view>
					<!-- <ripple></ripple> -->
					<sdropdown ref="orderby">
						<view class="bcf pad1 tac shadow1 " style="min-width: 25vw;z-index: 999;">
							<view class="pad2 bdbda pos-r" @tap="setOrder({id:'DESC'})">
								默认排序
								<ripple></ripple>
							</view>
							<view class="pad2 bdbda pos-r" @tap="setOrder({'status.sort':'ASC'})">
								维修状态
								<ripple></ripple>
							</view>
							<view class="pad2 bdbda pos-r" @tap="setOrder({'createAt':'DESC'})">
								提报时间
								<ripple></ripple>
							</view>
							<view class="pad2 bdbda pos-r" @tap="setOrder({'emergency.id':'DESC'})">
								紧急程度
								<ripple></ripple>
							</view>
						</view>
					</sdropdown>
					
				</view>
			</view>
		</view>
		
		
		<view class="padlr3">
			
			<view class="bcf pos-r mart3 pad2 round2 shadow" 
			@tap="goto('/pages/machine/break_order_info?id='+item.id)" 
			v-for="item in data" :key="item.id">
				<breaks :item="item"></breaks>
			</view>
		</view>
		<loading :loading="myIsLoading"></loading>
	</scroll>
</template>

<script>
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	import List from '../../assets/js/list.js'
	
	
	import breaks from '../../templete/machine/machine_break_list_com.vue'
	
	export default {
		mixins:[MescrollMixin],
		components:{breaks},
		data() {
			let list = new List()
			return {
				list,
				where:{
					eq:{
						status:'',
						emergency:'',
						level:'',
						'machine.department':'',
					}
				},
				order:{
					id:'DESC'
				},
				search:"",
				data:[],
				static:null,
				showDetail:false
			}
		},
		methods: {
			reload(){
				this.showLoading()
				this.list.setData({_order:this.order,_where:this.where,_search:this.search}).reload()
			},
			doSearch(){
				this.showLoading()
				this.list.setData({_order:this.order,_where:this.where,_search:this.search}).reload()
			},
			setOrder(order){
				console.log(order)
				this.order = order
				this.reload()
			}
		},
		mounted() {
			this.list.initMescroll(this).setUrl('/api/machineBreaks').setData({
				_order:this.order,
				_where:this.where,
				_search:this.search,
			}).setCbFunc(res=>{
				this.data = res
				this.clearLoading()
			}).reload()
		},
		onShow() {
			this.list.reload()
		},
		onLoad() {
			this.$api.get('/api/machine/static/break',{},res=>{
				this.log(res)
				this.static = res.d
			})
		},
		watch:{
		}
	}
</script>

<style>

</style>
